<!--
* @description 
* @fileName info.vue
* @author huangyu
* @date 2023/03/07 14:48:21
!-->
<template>
   <div>
        <van-nav-bar title="我的信息" />
        <van-form @submit="onSubmit" v-if="token">
            <van-cell title="游戏账号"><span v-if="userForm.gameCode">{{userForm.gameCode[0]}}******{{userForm.gameCode[userForm.gameCode.length-1]}}</span></van-cell>
            <van-cell title="游戏名称">
                <van-field v-model="userForm.gameName" placeholder="游戏名称" :rules="[{ required: true, message: '请填写游戏名称' }]" />
            </van-cell>
            <van-cell title="QQ">
                <div style="float:right;">
                    <van-field v-model="userForm.qq" placeholder="QQ" :rules="[{ required: true, message: '请填写QQ' }]" />
                    <van-checkbox v-model="userForm.isSecrecy">是否保密</van-checkbox>
                </div>
            </van-cell>
            <van-cell title="密码" :value="userForm.qq">
                <div style="float:right;">
                    <van-checkbox v-model="isEditPassWord">修改密码</van-checkbox>
                </div>
            </van-cell>
            <van-field v-if="isEditPassWord" v-model="passwordText" type="password" name="输入密码" label="输入密码" placeholder="输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
            <van-cell v-if="isEditPassWord">此密码仅用于登录网站，不是游戏密码</van-cell>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">保存提交</van-button>
            </div>
            <div style="margin: 16px;">
                <van-button round block plain @click="loginOut" type="info">退出</van-button>
            </div>
        </van-form>
        <div v-else style="margin:30px auto;text-align: center;"><van-button type="info" @click="clickLogin">立即登录</van-button></div>
        <van-popup v-model="show" position="top" :style="{ height: '40%' }">
            <vLogin @onLogin="onLogin"></vLogin>
        </van-popup>
   </div>
</template>

<script>
import { get } from '@/common/app.js'
import vLogin from "../login.vue"
import md5 from 'js-md5';
import { Toast } from 'vant';
import * as types from "@/store/types";
export default {
   components: {vLogin},
   data() {
       return {
            token: this.$store.state.token,
            userForm: {},
            isEditPassWord: false,
            passwordText: "",
            show: false,
       }
   },
   mounted() {
        if(this.token){
            this.getDetail()
        }
   },
   methods: {
        getDetail(){
            this.userForm = {}
            let params = {
                type: 'getUser',
                api: 'api-user-detail',
                token: this.token,
                data:{},
            }
            get('game', params).then(res => {
                if (res) {
                    this.userForm = res
                }
            })
        },
        onSubmit(){
            if(this.token){
                this.userForm.password = md5(this.passwordText)
                let params = {
                    type: 'getUser',
                    api: 'api-user-edit',
                    data: this.userForm,
                }
                get('game', params).then(res => {
                    if (res) {
                        if(res.requestId){
                            Toast("保存成功！")
                            this.getDetail()
                        }
                    }
                })
            }
        },
        clickLogin(){
            this.show = true
        },
        onLogin(){
            this.show = false
        },
        loginOut(){
            this.$store.commit(types.LOGOUT);
            this.$router.push({ path: "/" });
            Toast("已退出！")
            this.$router.go(0)
        },
   },
}
</script>

<style scoped>

</style>